<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="/js/editormd/css/editormd.css"/>
    <link rel="stylesheet" type="text/css" href="/js/webuploader/webuploader.css"/>

    <style>
        body {
            background: #f3f5f6;
        }

        @charset "UTF-8";
        body, div, h4, p {
            margin: 0;
            padding: 0
        }

        :focus {
            outline: 0
        }

        h4 {
            font-size: 100%;
            font-weight: 400
        }

        body {
            background: #fff;
            color: #5e5e5e;
            font: 14px/2em Microsoft YaHei, SimSun, Arial
        }

        :link, :visited {
            text-decoration: none
        }

        a:link, a:visited {
            color: #5e5e5e
        }

        a:hover {
            color: #c9394a
        }

        a:active {
            color: #666
        }

        .clearfix:after {
            content: '\0020';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }

        .clearfix {
            *zoom: 1
        }

        a:focus {
            outline: 0;
            -moz-outline: 0
        }

        body, html {
            font: 14px/1.5 "PingFang SC", "微软雅黑", "Microsoft YaHei", Helvetica, "Helvetica Neue", Tahoma, Arial, sans-serif;
            color: #1c1f21;
            height: 100%
        }

        body {
            min-width: 1200px;
            background-color: #f8fafc;
            overflow-y: auto;
            padding-top: 0;
            -webkit-transition: -webkit-transform .3s ease;
            transition: transform .3s ease
        }

        a:link, a:visited {
            color: #1c1f21
        }

        a:active, a:hover {
            color: #ec1500
        }

        .clearfix:after {
            content: '\0020';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden
        }

        body #main {
            margin: 20px;
            min-height: calc(100vh - 266px);
            background: #fff;
            padding: 10px 30px;
        }

        a {
            outline: 0
        }

        a:active {
            star: expression(this.onFocus=this.blur())
        }

        a {
            outline: 0
        }

        @media screen and (max-width: 767px) {
            body:after {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                z-index: 1000;
                content: " ";
                display: block;
                background: #000;
                opacity: 0;
                -webkit-transition: all .3s ease;
                transition: all .3s ease;
                visibility: hidden
            }
        }

        @font-face {
            font-family: icomoon;
            src: url(/static/fonts/icomoon/fonts/icomoon.eot?d8493nx);
            src: url(/static/fonts/icomoon/fonts/icomoon.eot?d8493nx#iefix) format('embedded-opentype'), url(/static/fonts/icomoon/fonts/icomoon.ttf?d8493nx) format('truetype'), url(/static/fonts/icomoon/fonts/icomoon.woff?d8493nx) format('woff'), url(/static/fonts/icomoon/fonts/icomoon.svg?d8493nx#icomoon) format('svg');
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: DINCond-M;
            src: url(/static/fonts/DINCondm/DINCOND-MEDIUM.otf);
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_AMS;
            src: url(/static/fonts/katex/KaTeX_AMS-Regular.672c961.eot);
            src: url(/static/fonts/katex/KaTeX_AMS-Regular.672c961.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_AMS-Regular.f4c3270.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_AMS-Regular.e78f217.woff) format("woff"), url(/static/fonts/katex/KaTeX_AMS-Regular.9971d27.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Caligraphic;
            src: url(/static/fonts/katex/KaTeX_Caligraphic-Bold.3c3fce5.eot);
            src: url(/static/fonts/katex/KaTeX_Caligraphic-Bold.3c3fce5.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Caligraphic-Bold.a2e0522.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Caligraphic-Bold.bac6199.woff) format("woff"), url(/static/fonts/katex/KaTeX_Caligraphic-Bold.743b42a.ttf) format("truetype");
            font-weight: 700;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Caligraphic;
            src: url(/static/fonts/katex/KaTeX_Caligraphic-Regular.a0ba281.eot);
            src: url(/static/fonts/katex/KaTeX_Caligraphic-Regular.a0ba281.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Caligraphic-Regular.479a68e.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Caligraphic-Regular.a64e134.woff) format("woff"), url(/static/fonts/katex/KaTeX_Caligraphic-Regular.244db27.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Fraktur;
            src: url(/static/fonts/katex/KaTeX_Fraktur-Bold.2b4454d.eot);
            src: url(/static/fonts/katex/KaTeX_Fraktur-Bold.2b4454d.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Fraktur-Bold.8e5f883.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Fraktur-Bold.0a0aa19.woff) format("woff"), url(/static/fonts/katex/KaTeX_Fraktur-Bold.ad26cc8.ttf) format("truetype");
            font-weight: 700;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Fraktur;
            src: url(/static/fonts/katex/KaTeX_Fraktur-Regular.dc81eae.eot);
            src: url(/static/fonts/katex/KaTeX_Fraktur-Regular.dc81eae.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Fraktur-Regular.ae2b6f4.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Fraktur-Regular.f980ca7.woff) format("woff"), url(/static/fonts/katex/KaTeX_Fraktur-Regular.d459632.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Main;
            src: url(/static/fonts/katex/KaTeX_Main-Bold.d327c21.eot);
            src: url(/static/fonts/katex/KaTeX_Main-Bold.d327c21.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Main-Bold.83f8b32.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Main-Bold.d8a629d.woff) format("woff"), url(/static/fonts/katex/KaTeX_Main-Bold.e69b951.ttf) format("truetype");
            font-weight: 700;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Main;
            src: url(/static/fonts/katex/KaTeX_Main-Italic.2702ac3.eot);
            src: url(/static/fonts/katex/KaTeX_Main-Italic.2702ac3.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Main-Italic.07510ed.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Main-Italic.8dd42e0.woff) format("woff"), url(/static/fonts/katex/KaTeX_Main-Italic.1b22614.ttf) format("truetype");
            font-weight: 400;
            font-style: italic
        }

        @font-face {
            font-family: KaTeX_Main;
            src: url(/static/fonts/katex/KaTeX_Main-Regular.31ec450.eot);
            src: url(/static/fonts/katex/KaTeX_Main-Regular.31ec450.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Main-Regular.bd65225.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Main-Regular.2dffc87.woff) format("woff"), url(/static/fonts/katex/KaTeX_Main-Regular.d9162df.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Math;
            src: url(/static/fonts/katex/KaTeX_Math-Italic.031026c.eot);
            src: url(/static/fonts/katex/KaTeX_Math-Italic.031026c.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Math-Italic.afeebb7.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Math-Italic.da58601.woff) format("woff"), url(/static/fonts/katex/KaTeX_Math-Italic.55fbb3a.ttf) format("truetype");
            font-weight: 400;
            font-style: italic
        }

        @font-face {
            font-family: KaTeX_SansSerif;
            src: url(/static/fonts/katex/KaTeX_SansSerif-Regular.a3319b7.eot);
            src: url(/static/fonts/katex/KaTeX_SansSerif-Regular.a3319b7.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_SansSerif-Regular.7d5fa3e.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_SansSerif-Regular.48c7df6.woff) format("woff"), url(/static/fonts/katex/KaTeX_SansSerif-Regular.8075d14.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Script;
            src: url(/static/fonts/katex/KaTeX_Script-Regular.cf8394e.eot);
            src: url(/static/fonts/katex/KaTeX_Script-Regular.cf8394e.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Script-Regular.c472b57.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Script-Regular.5acb381.woff) format("woff"), url(/static/fonts/katex/KaTeX_Script-Regular.abb12fc.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Size1;
            src: url(/static/fonts/katex/KaTeX_Size1-Regular.5438d9d.eot);
            src: url(/static/fonts/katex/KaTeX_Size1-Regular.5438d9d.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Size1-Regular.feed6c7.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Size1-Regular.bdd0d5e.woff) format("woff"), url(/static/fonts/katex/KaTeX_Size1-Regular.8cc60fd.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Size2;
            src: url(/static/fonts/katex/KaTeX_Size2-Regular.1f5c2ab.eot);
            src: url(/static/fonts/katex/KaTeX_Size2-Regular.1f5c2ab.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Size2-Regular.8a86a0a.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Size2-Regular.fd67fb3.woff) format("woff"), url(/static/fonts/katex/KaTeX_Size2-Regular.5976fff.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Size3;
            src: url(/static/fonts/katex/KaTeX_Size3-Regular.1a6c0d6.eot);
            src: url(/static/fonts/katex/KaTeX_Size3-Regular.1a6c0d6.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Size3-Regular.2c1ea03.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Size3-Regular.943c94f.woff) format("woff"), url(/static/fonts/katex/KaTeX_Size3-Regular.e929f5d.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Size4;
            src: url(/static/fonts/katex/KaTeX_Size4-Regular.5a3cee2.eot);
            src: url(/static/fonts/katex/KaTeX_Size4-Regular.5a3cee2.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Size4-Regular.680d35e.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Size4-Regular.6853774.woff) format("woff"), url(/static/fonts/katex/KaTeX_Size4-Regular.81ab95e.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        @font-face {
            font-family: KaTeX_Typewriter;
            src: url(/static/fonts/katex/KaTeX_Typewriter-Regular.179ea52.eot);
            src: url(/static/fonts/katex/KaTeX_Typewriter-Regular.179ea52.eot#iefix) format("embedded-opentype"), url(/static/fonts/katex/KaTeX_Typewriter-Regular.d2f65c2.woff2) format("woff2"), url(/static/fonts/katex/KaTeX_Typewriter-Regular.9bd7cfe.woff) format("woff"), url(/static/fonts/katex/KaTeX_Typewriter-Regular.8f16d7f.ttf) format("truetype");
            font-weight: 400;
            font-style: normal
        }

        .nano .nano-pane {
            right: 0 !important;
            width: 4px !important
        }

        .nano .nano-pane .nano-slider {
            background: rgba(28, 31, 33, .1) !important;
            border-radius: 4px !important
        }

        body {
            overflow: hidden;
            background-color: #f3f5f6
        }

        body #main .article-head {
            position: relative;
            height: 68px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        body #main .article-head .draft-warp {
            float: left;
            margin: 16px 0 0 0;
            position: relative
        }

        body #main .article-head .draft-warp .draft-btn {
            float: left;
            position: relative;
            width: 108px;
            height: 36px;
            background: rgba(28, 31, 33, .08);
            color: #545c63;
            border-radius: 18px
        }

        body #main .article-head .draft-warp .draft-btn > p {
            text-align: center;
            cursor: pointer;
            margin: 0
        }

        body #main .article-head .draft-warp .draft-btn > p i {
            position: relative;
            top: 2px;
            font-size: 16px
        }

        body #main .article-head .draft-warp .draft-btn > p span {
            font-size: 14px;
            line-height: 36px
        }

        body #main .article-head .draft-warp .draft-btn .draft-num {
            position: absolute;
            top: -4px;
            right: -4px;
            padding: 2px 4px;
            background: #f20d0d;
            border-radius: 8px;
            font-size: 12px;
            color: #fff;
            line-height: 12px
        }

        body #main .article-head .draft-warp .draft-tip {
            float: left;
            margin: 8px 0 0 12px;
            font-size: 12px;
            color: #9199a1;
            line-height: 18px
        }

        body #main .article-head .draft-warp .draft-container {
            position: absolute;
            top: 52px;
            z-index: 3;
            width: 384px;
            height: 366px;
            padding: 16px;
            box-sizing: border-box;
            box-shadow: 0 8px 16px 0 rgba(7, 17, 27, .2);
            background-color: #fff;
            border-radius: 12px
        }

        body #main .article-head .draft-warp .draft-container .arrow-icon {
            display: block;
            width: 0;
            height: 0;
            border-width: 0 16px 16px;
            border-style: solid;
            border-color: transparent transparent #fff;
            position: absolute;
            top: -16px
        }

        body #main .article-head .draft-warp .draft-container .draft-container-title span:first-child {
            float: left;
            font-weight: 700;
            font-size: 14px;
            color: #1c1f21;
            line-height: 22px
        }

        body #main .article-head .draft-warp .draft-container .draft-container-title span:nth-child(2) {
            float: right;
            font-size: 12px;
            color: #9199a1;
            line-height: 18px
        }

        body #main .article-head .draft-warp .draft-container .draft-list {
            margin-top: 14px;
            height: 298px
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item {
            display: block;
            height: 60px;
            padding: 12px;
            background: rgba(84, 92, 99, .05);
            border-radius: 8px;
            box-sizing: border-box;
            cursor: pointer
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item:not(:first-child) {
            margin-top: 4px
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-icon {
            float: left;
            font-size: 32px;
            color: #b2b8bd;
            line-height: 36px
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-item-info {
            float: left;
            margin-left: 12px;
            width: 244px
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-item-info h4 {
            font-weight: 700;
            font-size: 14px;
            color: #545c63;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 0
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-item-info p {
            font-size: 12px;
            color: #9199a1;
            line-height: 16px;
            margin: 0
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item .draft-del {
            display: none;
            float: right;
            font-size: 20px;
            color: #b2b8bd;
            line-height: 36px
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item:hover {
            background: rgba(0, 85, 255, .1)
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item:hover .draft-item-info h4 {
            color: #05f
        }

        body #main .article-head .draft-warp .draft-container .draft-list .draft-item:hover .draft-del {
            display: block
        }

        body #main .article-head .editor-change-warp {
            position: absolute;
            left: 50%;
            transform: translate(-50%);
            margin-top: 22px
        }

        body #main .article-head .editor-change-warp span {
            padding: 4px 12px;
            font-size: 12px;
            color: #545c63;
            line-height: 16px;
            cursor: pointer
        }

        body #main .article-head .editor-change-warp span.active {
            background: #9199a1;
            color: #fff;
            border-radius: 12px
        }

        body #main .article-head .editor-change-warp span:first-child {
            margin-right: 12px
        }

        body #main .article-head .publish-btn {
            display: block;
            float: right;
            margin: 16px 0 0 0;
            width: 148px;
            height: 46px;
            line-height: 46px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            background: #37f;
            border-radius: 32px;
            cursor: pointer
        }

        body #main .article-wrap {
            width: 800px;
            height: auto;
            margin: 0 auto;
            padding: 0 32px;
            box-sizing: border-box;
            background: #fff;
            box-shadow: 0 8px 16px 0 rgba(28, 31, 33, .1);
            border-radius: 12px 12px 0 0
        }

        .nano {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden
        }

        .nano > .nano-content {
            position: absolute;
            overflow: scroll;
            overflow-x: hidden;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0
        }

        .nano > .nano-content:focus {
            outline: thin dotted
        }

        .nano > .nano-content::-webkit-scrollbar {
            display: none
        }

        .has-scrollbar > .nano-content::-webkit-scrollbar {
            display: block
        }

        .nano > .nano-pane {
            position: absolute;
            width: 10px;
            right: 10px;
            top: 0;
            bottom: 0;
            visibility: hidden \9;
            -webkit-transition: .2s;
            -moz-transition: .2s;
            -o-transition: .2s;
            transition: .2s;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px
        }

        .nano > .nano-pane > .nano-slider {
            background: #4e5a5e;
            position: relative;
            margin: 0 1px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px
        }

        .nano:hover > .nano-pane {
            visibility: visible \9;
            opacity: .99
        }

        body #main .article-title {
            height: 62px;
            text-indent: 0.1em;
            font-weight: 700;
            font-size: 20px;
            color: #1c1f21;
            line-height: 30px;
            box-sizing: content-box;
            border: none;
            margin-right: 10px;
            border-bottom: 1px solid #eee;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="hidden" ref="blogId" value="${(blogId)!}">
    <div id="main" class="yykk_editbox">
        <div class="article-head clearfix">
            <span><a href="/">返回</a></span>
            <select name="topicCategoryId" v-model="blog.categoryId" @change="changeCategory($event)"
                    class="article-title" id="category" style="width: 180px;">
                <option value="1" selected>程序人生</option>
                <option value="10">面试</option>
                <option value="11">数据库</option>
                <option value="12">安全</option>
                <option value="13">测试</option>
                <option value="2">管理</option>
                <option value="3">教程</option>
                <option value="4" selected="selected">学习笔记</option>
                <option value="5">踩坑记录</option>
                <option value="6">架构</option>
                <option value="7">后台</option>
                <option value="8">前端</option>
                <option value="9">问答</option>
            </select>
            <input type="text" id="article_title" v-model="blog.title" class="article-title" placeholder="请在此输入标题"
                   style="width: 28%; ">
            <input type="text" id="article_title-desc" v-model="blog.description" class="article-title"
                   placeholder="用一句话描述此文章"
                   style="width: 10%; font-weight:400;font-size: 12px;position: relative;top:-2px;">
            <span style="position: relative">
            <input type="text" id="article-img"  v-model="blog.img"  ref="blogImg" class="article-title"
                     placeholder="上传封面图" style="width: 18%; font-weight:400;font-size: 12px;position: relative;top:-2px;">
             <span id="filePicker" style="position: absolute;top:-10px;right:20px;">选择图片</span>
                <img style="position: absolute;top:-10px;right:-40px;" width="48" height="40" id="imgshow" alt="">
             </span>
            <span style="position: fixed;right: 30px;top: 20px;">
                <a class="publish-btn js-article-publish" @click="saveBlog()" href="javascript:void(0)">发表</a>
                <a v-if="blog.id" class="publish-btn js-article-publish"style="margin-right: 10px;" :href="'/detail/'+blog.id">预览</a>
                <a v-else class="publish-btn js-article-publish"style="margin-right: 10px;" :href="'/index'">返回</a>
            </span>
        </div>
        <!-- 文章的主体内容 textarea -->
        <div id="article-content"></div>
    </div>
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/editormd/editormd.js"></script>
<script src="/js/webuploader/webuploader.js"></script>
<script src="/js/vue.global.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/blog/add.js"></script>
<script>

    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick:{
            id:'#filePicker',
            multiple:false // 默认是：true代表选择多张上传，false只能选择一张上传
        },
        // swf文件路径
        swf:  '/js/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: '/api/oss/uploadFile?dir=blogs',
        // 选择文件的按钮。可选。
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 文件上传成功的回调
    uploader.on( 'uploadSuccess', function( file,response ) {
        // 把上传的图片放入到input框中
        document.getElementById("article-img").value = response.url;
        // 把图片放入到img标签进行展示
        document.getElementById("imgshow").src = response.url;
    });

</script>

</body>
</html>